import React from 'react';
import styled from 'styled-components';
import { Radio, Toast } from 'antd-mobile';
import { FiSun, FiGlobe } from 'react-icons/fi';
import { useDispatch, useSelector } from 'react-redux';
import { setTheme } from '@/store/Theme';
import { setLanguage } from '@/store/Language';
import { themeColors, useTheme, ThemeType } from '@/theme';
import { useTranslation } from 'react-i18next';
import { PageLayout } from '@/components/grid/PageLayout';

const themes = [
  { label: '默认紫色', value: 'default', color: themeColors.default.primary },
  { label: '温柔粉色', value: 'pink', color: themeColors.pink.primary },
  { label: '清新绿色', value: 'green', color: themeColors.green.primary },
  { label: '天空蓝色', value: 'sky', color: themeColors.sky.primary },
] as const;

const languages = [
  { label: '简体中文', value: 'zh_CN' },
  { label: '繁體中文', value: 'zh_TW' },
  { label: 'English', value: 'en_US' },
] as const;

const Settings: React.FC = () => {
  const dispatch = useDispatch();
  const currentTheme = useSelector((state: any) => state.theme) as ThemeType;
  const { t, i18n } = useTranslation();
  const theme = useTheme(currentTheme);

  const handleThemeChange = (theme: ThemeType) => {
    dispatch(setTheme(theme));
    Toast.show({
      icon: 'success',
      content: t('通用.成功'),
    });
  };

  const handleLanguageChange = async (language: string) => {
    dispatch(setLanguage(language));
    await i18n.changeLanguage(language);
    Toast.show({
      icon: 'success',
      content: t('通用.成功'),
    });
  };

  return (
    <PageLayout title={t('设置.标题')}>
      <Section $theme={theme}>
        <SectionTitle $theme={theme}>
          <FiSun />
          {t('设置.主题设置')}
        </SectionTitle>
        <ThemeContainer>
          {themes.map((themeOption) => (
            <ThemeOption
              key={themeOption.value}
              onClick={() => handleThemeChange(themeOption.value)}
              $isActive={currentTheme === themeOption.value}
              $color={themeOption.color}
              $theme={theme}
            >
              <ThemeColor $color={themeOption.color} />
              <span>{t(`设置.主题.${themeOption.label}`)}</span>
            </ThemeOption>
          ))}
        </ThemeContainer>
      </Section>

      <Section $theme={theme}>
        <SectionTitle $theme={theme}>
          <FiGlobe />
          {t('设置.语言设置')}
        </SectionTitle>
        <Radio.Group
          value={i18n.language}
          onChange={(val) => handleLanguageChange(val as string)}
        >
          {languages.map((lang) => (
            <LanguageOption key={lang.value} $theme={theme}>
              <Radio value={lang.value}>{lang.label}</Radio>
            </LanguageOption>
          ))}
        </Radio.Group>
      </Section>
    </PageLayout>
  );
};

export default Settings;

const Section = styled.section<{ $theme: any }>`
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid ${props => props.$theme.border};
`;

const SectionTitle = styled.h2<{ $theme: any }>`
  font-size: 16px;
  color: ${props => props.$theme.text};
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  
  svg {
    font-size: 18px;
    color: ${props => props.$theme.lightText};
  }
`;

const ThemeContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
`;

const ThemeOption = styled.div<{ $isActive?: boolean; $color: string; $theme: any }>`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  border: 2px solid ${props => props.$isActive ? props.$color : props.$theme.border};
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: ${props => props.$color};
    background: ${props => `${props.$color}10`};
  }
`;

const ThemeColor = styled.div<{ $color: string }>`
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: ${props => props.$color};
`;

const LanguageOption = styled.div<{ $theme: any }>`
  padding: 12px 0;
  
  .adm-radio {
    --icon-size: 20px;
    --font-size: 16px;
    --gap: 8px;
    --checked-color: ${props => props.$theme.primary};
  }
`; 